<template>
  <el-row class="userlogin">
    <el-col :span="18" :offset="3" class="body">
      <el-form
        ref="loginForm"
        :model="form"
        :rules="rules"
        :inline-message="true"
        label-width="0px"
      >
        <el-form-item prop="email" label-width="0px">
          <div v-show="form.email || emailFocus" class="title_show">邮箱</div>
          <el-input
            v-model="form.email"
            placeholder="邮箱"
            @focus="emailFocus = true"
            @blur="emailFocus = false"
          ></el-input>
        </el-form-item>
        <el-form-item prop="pwd" label-width="0px" class="pwd">
          <div v-show="form.pwd || pwdFocus" class="title_show">密码</div>
          <el-input
            v-model="form.pwd"
            placeholder="密码"
            show-password
            @focus="pwdFocus = true"
            @blur="pwdFocus = false"
          >
            <nuxt-link
              slot="suffix"
              to="/changepwd"
              class="forgetPwd"
              @click="changeDialog"
            >
              忘记密码？
            </nuxt-link>
          </el-input>
        </el-form-item>
        <el-form-item
          prop="verificationCode"
          label-width="0px"
          class="verificationCode"
        >
          <div
            v-show="form.verificationCode || verificationCodeFocus"
            class="title_show"
          >
            验证码
          </div>
          <el-col :span="15">
            <el-input
              v-model="form.verificationCode"
              placeholder="验证码"
              @focus="verificationCodeFocus = true"
              @blur="verificationCodeFocus = false"
            ></el-input>
          </el-col>
          <el-col :span="9" class="v_code_image">
            <VerificationCode :width="90" :height="30" @setUuid="setUuid" />
          </el-col>
        </el-form-item>
        <el-row class="form_block">
          <el-col :span="12">
            <el-checkbox v-model="isRemember">记住我</el-checkbox>
          </el-col>
          <el-col :span="12" class="changeDialog">
            <el-button type="text" @click="changeDialogPage">
              立即注册
              <i class="el-icon-arrow-right" />
            </el-button>
          </el-col>
        </el-row>
        <el-row class="form_block">
          <el-button
            id="login"
            type="primary"
            round
            @click.stop.prevent="login('loginForm')"
            >登录</el-button
          >
        </el-row>
        <el-row class="agreement form_block">
          登录即代表您已同意
          <a href="/" @click.stop.prevent="isReg = true">《注册协议》</a>和
          <a href="/" @click.stop.prevent="isReg = true">《隐私政策》</a>
        </el-row>
      </el-form>
    </el-col>
  </el-row>
</template>

<script>
import VerificationCode from '../VerificationCode'
import secret from '@/assets/js/utils/secret'
import { checkEmail, checkPwd } from '@/assets/js/check'
export default {
  components: {
    VerificationCode
  },
  props: {
    changeDialog: { type: Function, default: () => {} },
    changeDialogPage: { type: Function, default: () => {} }
  },
  data() {
    return {
      isRemember: false,
      emailFocus: false,
      pwdFocus: false,
      verificationCodeFocus: false,
      form: {
        email: '',
        pwd: '',
        verificationCode: '',
        setUuid: ''
      },
      rules: {
        email: [{ validator: checkEmail, trigger: 'blur' }],
        pwd: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { validator: checkPwd, trigger: 'blur' }
        ],
        verificationCode: [
          { required: true, message: '请输入验证码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    setUuid(uuid) {
      this.form.uuid = uuid
    },
    login(formName) {
      const self = this
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          const { status: statusU, data: dataU } = await self.$axios.post(
            '/user/login',
            {
              email: self.form.email,
              pwd: secret.Encrypt(self.form.pwd),
              vcode: self.form.verificationCode,
              uuid: self.form.uuid
            }
          )
          if (statusU === 200) {
            if (dataU.code === 1) {
              self.$message({
                message: dataU.msg,
                type: 'success'
              })
              self.changeDialog()
              self.$store.dispatch('user/setUser', dataU.user)
              const { status: statusUC, data: dataUC } = await self.$axios.get(
                '/classification/userClass'
              )
              if (statusUC === 200 && dataUC.code === 1) {
                self.$store.commit('classification/setUserClass', dataUC.data)
                await self.$store.dispatch('user/setDynamic', self.$axios)
              }
            } else {
              self.$message({
                message: dataU.msg,
                type: 'error'
              })
            }
          }
        } else {
          self.$message({
            message: '请输入正确的信息',
            type: 'error'
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.body .el-form-item {
  position: relative;
  margin-bottom: 24px;
}
.body .form_block {
  margin-bottom: 24px;
}
.v_code_name {
  line-height: 40px;
}
.v_code_image {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}
.forgetPwd {
  line-height: 40px;
  color: $--color-primary;
  text-decoration: none;
  cursor: pointer;
}
.changeDialog {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  button {
    padding: 0;
  }
  a {
    color: $--color-primary;
    text-decoration: none;
  }
  i {
    vertical-align: middle;
  }
}
.title_show {
  position: absolute;
  top: -20px;
  left: 14px;
  font-size: 12px;
  color: $--color-primary;
  z-index: 1;
}
#login {
  width: 100%;
}
.agreement {
  font-size: 10px;
  a {
    color: $--color-primary;
    text-decoration: none;
  }
}
/deep/ .pwd input {
  padding-right: 110px;
}
/deep/ .el-form-item__error--inline {
  position: absolute;
  top: -10px;
  right: 16px;
}
/deep/ .verificationCode .el-form-item__error--inline {
  position: absolute;
  top: -10px;
  right: 120px;
}
/deep/ .el-input__inner {
  border: none;
  border-bottom: 1px solid #c0c4cc;
  &:focus {
    border-color: $--color-primary;
  }
}
</style>
